<template>
	<view class="page reservation_list_page">
		<view class="day_list">
			<view class="day_item" :class="{'active':dayItem.dateStr ==  item.dateStr}" v-for="(item,index) in dayList"
				:key="index" @click="changeDate(item)">
				<view class="item_week">
					{{`周${item.week}`}}
				</view>
				<view class="item_day">
					{{`${item.month}.${item.day}`}}
				</view>
			</view>
		</view>
		<view class="list" v-if="doctorList.length>0">
			<view class="card doctor_item" v-for="item in doctorList" :key="item.id" @click="gotoPage(item)">
				<view class="doctor_star">
					<view>
						<doctorInfo
							:item="{name:item.name,avatar:item.avatar,titleName:item.titleName,departName:item.departName,levelName:item.levelName,hospitalName:item.hospitalName}">
						</doctorInfo>
					</view>
					<view class="info_star">
						预约
					</view>
				</view>
				<view class="doctor_evaluate">
					<view class="evaluate star">
						<view class="icon">
							<image src="@/static/icon/doctor/star-icon.png" mode="widthFix"></image>
						</view>
						<view class="nums">
							{{item.favorableCount || 0}}%
						</view>
					</view>
					<view class="evaluate">
						<view class="icon">
							接诊量
						</view>
						<view class="nums">
							{{item.treatmentCount || ''}}
						</view>
					</view>
					<view class="evaluate">
						<view class="icon">
							回复
						</view>
						<view class="nums">
							{{item.replySpeed || ''}}
						</view>
					</view>
				</view>
				<view class="doctor_capacity ellipsis-2">
					<text class="text">擅长:</text>
					{{item.proficient || ''}}
				</view>
			</view>
		</view>
		<view class="no_thing" v-else>
			<image class="placeholder" src="@/static/images/noting.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		setNowDate
	} from '@/utils/utils.js'
	import {
		queryAppointDoctorList,
		insertAppointInfo
	} from '@/api/index.js'

	export default {
		data() {
			return {
				dayList: [],
				dayItem: {},
				doctorList: [],
				total: 0,
				quaryForm: {
					pageNo: 1,
					pageSize: 10,
					startAppointTime: "",
					endAppointTime: "",
				}
			}
		},
		onLoad(options) {
			// proficientDiseases
			// departId
			let search = JSON.parse(options.search)
			if (search.proficientDiseases) {
				this.quaryForm.proficientDiseases = search.proficientDiseases
			} else if (search.departId) {
				this.quaryForm.departId = search.departId
			}
			this.title = search.title
			this.dayList = setNowDate(new Date(), 14)
			this.dayItem = this.dayList[0]
			this.quaryForm.startAppointTime = `${this.dayItem.dateStr}T00:00:00`
			this.quaryForm.endAppointTime = `${this.dayItem.dateStr}T23:59:59`
			this.getAppointDoctorList()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: `${this.title}`
			});
		},
		methods: {
			getAppointDoctorList() {
				queryAppointDoctorList(this.quaryForm).then((res) => {
					this.doctorList = res.data.list
					this.total = res.total
				}).catch((err) => {
					console.log(err)
				})
			},
			changeDate(item) {
				this.dayItem = item
				this.quaryForm.startAppointTime = `${this.dayItem.dateStr}T00:00:00`
				this.quaryForm.endAppointTime = `${this.dayItem.dateStr}T23:59:59`
				this.pageNo = 1
				this.getAppointDoctorList()
			},
			gotoPage(item) {
				uni.navigateTo({
					url: `/pagesCommon/doctor/details?type=reservation&doctorId=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.reservation_list_page {
		padding: 0;

		.day_list {
			display: flex;
			align-items: center;
			overflow-x: auto;
			background-color: #fff;
			padding: 30rpx;

			.day_item {
				flex: 0 0 114rpx;
				padding: 20rpx;
				margin-right: 10rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 30rpx;

				&.active {
					background: #E1E7FA;

					.item_day,
					.item_week {
						color: #3B6CFE;
					}
				}

				.item_week {
					color: #999;
				}

				.item_day {
					margin-top: 10rpx;
					color: #333;
				}
			}
		}

		.list {
			padding: 0 30rpx;

			.doctor_item {
				margin: 30rpx 0;
				padding: 30rpx 20rpx;

				.doctor_star {
					display: flex;
					justify-content: space-between;

					.info_star {
						padding: 10rpx 40rpx;
						height: 60rpx;
						line-height: 40rpx;
						text-align: center;
						box-sizing: border-box;
						background-color: #4070FE;
						border-radius: 20rpx;
						font-size: 22rpx;
						color: #FFF;
					}
				}

				.doctor_evaluate {
					display: flex;
					align-items: center;
					margin: 30rpx 0;

					.evaluate {
						margin-right: 20rpx;
						display: flex;
						align-items: center;

						&.star {
							.nums {
								font-weight: bold;
								font-size: 26rpx;
								color: #F1AE34;
							}
						}

						.icon {
							margin-right: 10rpx;
							font-size: 22rpx;
							color: rgba(153, 153, 153, 0.8);

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.nums {
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}


				.doctor_capacity {
					color: #333;
					font-size: 26rpx;

					.text {
						display: inline-block;
						color: #999999;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>